<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/JSP/Common/head.jsp"%>
<div class="nowPosition">你所在的位置是添加用户</div>
<div class="addUser-div">
    <p style="padding-left: 8%;font-family: '楷体';color: red">${MESSAGE}</p>
    <form action="${pageContext.request.contextPath}/JSP/user.go" method="post" id="addUserForm">
        <input name="method" value="addUser" type="hidden">
        <label>
            <span class='addUser-span'>用户账号</span>
            <input id="userCode" name="userCode" type="text" class="addUser-input-text inshadow txtclick" placeholder="用户账号" />
            <span style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <span class='addUser-span'>用户名称</span>
            <input id="userName" name="userName" type="text" class="addUser-input-text inshadow txtclick" placeholder="用户名称" />
            <span style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <span class='addUser-span'>用户密码</span>
            <input id="userPassword" name="userPassword" type="password" class="addUser-input-text inshadow txtclick" placeholder="用户密码" />
            <span  style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <span class='addUser-span'>确认密码</span>
            <input disabled="disabled" id="userRpassword" name="userRpassword" type="password" class="addUser-input-text inshadow txtclick" placeholder="确认密码" />
            <span style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <span class='addUser-span'>性别</span>
            <!--<input id="userSex" type="text" class="addUser-input-text inshadow txtclick" placeholder="性别" />-->
            <select id="userGender" name="userGender" class="addUser-genderSelect inshadow txtclick">
                <option value="女">女</option>
                <option value="男">男</option>
            </select>
        </label><br />
        <label>
            <span class='addUser-span'>出生日期</span>
            <input id="userBirthday" name="userBirthday" type="text" class="addUser-input-text inshadow txtclick" placeholder="出生日期" />
            <span  style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <span class='addUser-span'>用户电话</span>
            <input id="userPhone" name="userPhone" type="text" class="addUser-input-text inshadow txtclick" placeholder="用户电话" />
            <span style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <span class='addUser-span'>用户地址</span>
            <input id="userAddress" name="userAddress" type="text" class="addUser-input-text inshadow txtclick" placeholder="用户地址" />
            <span style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <span class='addUser-span'>用户职位</span>
            <select id="userRole" name="userRole" class="addUser-genderSelect inshadow txtclick"></select>
            <span style="color: red;font-family: '楷体';">*</span>
        </label><br />
        <label>
            <input id="saveUser" type="button" class="btnclick addUser-input-save inshadow-white" value="添加" />
        </label>
        <label>
            <input type="button" class="goback btnclick addUser-input-goback inshadow-white" value="返回" />
        </label>
    </form>
</div>

<%@ include file="/JSP/Common/foot.jsp"%>
<%--<script type="text/javascript" src="${pageContext.request.contextPath}/JS/userAdd.js" ></script>--%>
<script type="text/javascript">
    var userAddFrom;
    var userCode;
    var userName;
    var userPassword;
    var userRpassword;
    var userSex;
    var userBirthday;
    var userPhone;
    var userAddress;
    var userRole;
    var saveUser;
    // var goback;

    $(function() {
        userAddFrom = $("#addUserForm");
        userCode = $("#userCode");
        userName = $("#userName");
        userPassword = $("#userPassword");
        userRpassword = $("#userRpassword");
        userSex = $("#userSex");
        userBirthday = $("#userBirthday");
        userPhone = $("#userPhone");
        userAddress = $("#userAddress");
        userRole = $("#userRole");
        saveUser = $("#saveUser");
        // goback = $("#goback");

        $.ajax({
            type : "GET",
            url : getPath() + "/JSP/user.go",
            data:{method:"getRoleList"},
            dateType:"json",
            success:function (data) {
                if (data != null) {
                    userRole.html("");
                    var options = "<option value=\"0\">--请选择--</option>";
                    for (var i = 0; i < data.length; i++) {
                        options += "<option value=\""+data[i].id+"\">"+data[i].roleName+"</option>";
                    }
                    userRole.html(options);
                }
            },
            error:function (data) {
                setStyles(userRole.next(), {'color':'red'}, getImgCross() + "(请求错误)", false);
            }
        });

        userCode.on({
            focus:function () {
                setStyles(userCode.next(), {'color':'red'}, "(输入你的账号用户登录)", false);
            },
            blur:function () {
                $.ajax({
                    type:"get",
                    url:getPath() + "/JSP/user.go",
                    data:{method:"verifyUserCodeExist", userCode:userCode.val()},
                    success:function (data) {
                        if (data.userCode == "exist") {
                            setStyles(userCode.next(), {"color": 'red'}, getImgCross() + "(该账号已存在)", false);
                        }else{
                            setStyles(userCode.next(), {'color':'#87CEEB'}, getImgTick() + "(该账号可以使用)", true);
                        }
                    },
                    error:function (data) {
                        setStyles(userCode.next(), {'color':'red'}, getImgCross() + "(请求错误)", false);
                    }
                });
            }
        });

        userName.on({
            focus:function () {
                setStyles(userName.next(), {'color':'red'}, "(名字要求1-5个字)", false);
                console.log("进入姓名填写");
            },
            blur:function () {
                var nameLength = userName.val().length;
                if (nameLength > 0 && nameLength < 6) {
                    setStyles(userName.next(), {'color':'#87CEED'}, getImgTick() + "(姓名符合)", true);
                    console.log("姓名正确:" + nameLength);
                } else{
                    setStyles(userName.next(), {'color':'red'}, getImgCross() + "(姓名不符合,请重新设置姓名)", false);
                    console.log("姓名错误:" + nameLength);
                }
            }
        });

        userPassword.on({
            focus:function () {
                setStyles(userPassword.next(), {'color':'red'}, "(密码要求2-6个字)", false);
                console.log("进入密码填写");
            },
            blur:function () {
                var passwordLength = userPassword.val().length;
                if (passwordLength > 1 && passwordLength < 7) {
                    setStyles(userPassword.next(), {'color':'#87CEED'}, getImgTick() + "(密码符合)", true);
                    setAttrs(userRpassword, {"disabled": false});
                    console.log("密码正确");
                } else{
                    setStyles(userPassword.next(), {'color':'red'}, getImgCross() + "(密码不符合,请重新设置密码)", false);
                    setStyles(userRpassword.next(), {'color':'red'}, "*", false);
                    userRpassword.val("");
                    setAttrs(userRpassword, {"disabled": true});
                    console.log("密码错误");
                }
            }
        });

        userRpassword.on({
            focus:function () {
                setStyles(userRpassword.next(), {'color':'red'}, "(请再次输入相同密码)", false);
                console.log("进入验证密码");
            },
            blur:function () {
                if (userRpassword.val() == userPassword.val()) {
                    setStyles(userRpassword.next(), {'color':'#87CEED'}, getImgTick() + "(密码一致)", true);
                    console.log("密码验证正确");
                } else{
                    setStyles(userRpassword.next(), {'color':'red'}, getImgCross() + "(密码不一致,请重新输入)", false);
                    console.log("密码验证错误");
                }
            }
        });

        userBirthday.on({
            focus:function () {
                setStyles(userBirthday.next(), {'color':'red'}, "(请输入出生日期:格式xxxx-xx-xx)", false);
                console.log("进入输入日期");
            },
            blur:function () {
                var dateFormat =/^(\d{4})-(\d{2})-(\d{2})$/;
                var birthday = userBirthday.val();
                if(dateFormat.test(birthday)){
                    setStyles(userBirthday.next(), {'color':'#87CEED'}, getImgTick() + "(日期符合)", true);
                    console.log("日期验证正确");
                }else{
                    setStyles(userBirthday.next(), {'color':'red'}, getImgCross() + "(日期不符合,请重新输入)", false);
                    console.log("日期验证错误");
                }
            }
        });

        userPhone.on({
            focus:function () {
                setStyles(userPhone.next(), {'color':'red'}, "(请输入手机号码)", false);
                console.log("进入输入手机号码");
            },
            blur:function () {
                var phoneFormat = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
                var phone = userPhone.val();
                if (phoneFormat.test(phone)){
                    setStyles(userPhone.next(), {'color':'#87CEED'}, getImgTick() + "(号码符合)", true);
                    console.log("号码验证正确");
                }else{
                    setStyles(userPhone.next(), {'color':'red'}, getImgCross() + "(号码不符合,请重新输入)", false);
                    console.log("号码验证错误");
                }
            }
        });

        userAddress.on({
            focus:function (){
                setStyles(userAddress.next(), {'color':'red'}, "(请输入你的住址)", false);
                console.log("进入地址编辑")
            },
            blur:function () {
                setStyles(userAddress.next(), {'color':'#87CEED'}, getImgTick() + " OK", true);
                console.log("地址输入OK");
            }
        });

        userRole.on({
            focus:function (){
                setStyles(userRole.next(), {'color':'red'}, "(请选择用户角色)", false);
                console.log("进入用户角色选择")
            },
            blur:function () {
                if (userRole.val() != null && userRole.val() > 0){
                    setStyles(userRole.next(), {'color':'#87CEED'}, getImgTick() + " OK", true);
                    console.log("用户角色选择OK");
                }else {
                    setStyles(userPhone.next(), {'color':'red'}, getImgCross() + "(请重新选择用户角色)", false);
                    console.log("用户角色选择失败");
                }
            }
        });

        saveUser.on({
            click:function (){
                console.log(userCode.attr("validateStatus"));
                console.log(userName.attr("validateStatus"));
                console.log(userPassword.attr("validateStatus"));
                console.log(userRpassword.attr("validateStatus"));
                console.log(userBirthday.attr("validateStatus"));
                console.log(userAddress.attr("validateStatus"));
                console.log(userPhone.attr("validateStatus"));
                console.log(userRole.attr("validateStatus"));
                if(userCode.attr("validateStatus") != "true"){
                    userCode.blur();
                }else if(userName.attr("validateStatus") != "true"){
                    userName.blur();
                }else if(userPassword.attr("validateStatus") != "true"){
                    userPassword.blur();
                }else if(userRpassword.attr("validateStatus") != "true"){
                    userRpassword.blur();
                }else if(userBirthday.attr("validateStatus") != "true"){
                    userBirthday.blur();
                }else if(userAddress.attr("validateStatus") != "true"){
                    userAddress.blur();
                }else if(userPhone.attr("validateStatus") != "true"){
                    userPhone.blur();
                }else if(userRole.attr("validateStatus") != "true"){
                    userRole.blur();
                }else{
                    if(confirm("是否确认提交数据")){
                        userAddFrom.submit();
                    }
                }
            }
        });

        // goback.on({
        //     click:function () {
        //         if(referer != undefined
        //             && null != referer
        //             && "" != referer
        //             && "null" != referer
        //             && referer.length > 4){
        //             window.location.href = referer;
        //         }else{
        //             history.back(-1);
        //         }
        //     }
        // });
    })
</script>